var fenyeList = [
    { id: 1, pageSize: 2 },
    { id: 2, pageSize: 4 },
]

var pageSize = 2 // 每页显示多少条数据，页码
var currentPage = 1 // 当前页
var total = listArr.length // 总条数
var limit = 1 // 分了多少页

// 获取页数
function getPageCount () {
    var value = document.getElementById('fenye').value
    var size = null

    for (var i = 0; i < fenyeList.length; i++) {
        if (fenyeList[i].id === JSON.parse(value)) {
            size = fenyeList[i].pageSize
        }
    }

    limit = Math.ceil(total / size)
}

// 初始化列表
function initPage() {
    // 2、根据列表数据去遍历数组，然后渲染到页面上
    var html = ``

    for (var i = 0; i < listArr.length; i++) {
        listArr[i].id = i + 1

        if (i >= (currentPage - 1) * pageSize && i < currentPage * pageSize) {
            html += `
                <div class="article" style="margin-top: ${i === 0 ? 0 : '20px'}">
                    <h4>${listArr[i].title + ' ' + listArr[i].id}</h4>

                    <div class="author">
                        <span class="mar-r-20">作者：${listArr[i].author}</span>
                        <span class="mar-r-20">创建时间：${listArr[i].createTime}</span>
                        <span class="mar-r-20">阅读：${listArr[i].readCount}</span>
                        <span>评论：${listArr[i].commentCount}</span>
                    </div>

                    ${listArr[i].content}

                    <div class="flex bg-50a5ff color-white w-px-80 font-12 align-center justify-center pad-y-5 bor-radius-3 mar-t-20">
                        <img src="./images/icon_005.png" class="w-px-14 mar-r-2"/>
                        <span>阅读全文</span>
                    </div>
                </div>
            `
        }
    }

    let listDom = document.getElementById('list')

    listDom.innerHTML = html
}


// 获取分页
function getPager() {
    var yemaDom = document.getElementById('yema')
    var yemaHtml = ''
    var leftArrow = ''
    var rightArrow = ``

    for (var i = 0; i < limit; i++) {
        yemaHtml += `
            <div
                onClick="handleClickYema(${i+1})"
                class="flex align-center justify-center color-333333 mar-r-5 cursor-pointer"
                style="width: 40px; height: 20px; background: ${currentPage===i+1 ? '#1e9fff' : '#cccccc'}; color: ${currentPage===i+1 ? '#ffffff' : '#333333'};"
            >
                ${i+1}
            </div>`

        if (i === 0) {
            leftArrow = `<span class="mar-r-5" style="color: ${ currentPage === 1 ? '#cccccc' : '#333333'};" onclick="handlePager('prev')">&lt;</span>`
        }

        if (i === limit - 1) {
            rightArrow = `<span style="color: ${ currentPage === limit ? '#cccccc' : '#333333'};" onclick="handlePager('next')">&gt;</span>`
        }
    }

    yemaDom.innerHTML = leftArrow + yemaHtml + rightArrow
}

// 分页改变时触发
function handleChangePage(e) {
    var id = JSON.parse(e.target.value)
    var size = null

    for (var i=0; i<fenyeList.length; i++) {
        if (id === fenyeList[i].id) {
            size = fenyeList[i].pageSize
        }
    }
    limit = Math.ceil(total / size)
    pageSize = size
    initPage()
    getPager()           
}

// 换页
function handlePager(type) {
    if (type === 'prev') {
        if (currentPage === 1) return
        currentPage-=1
        initPage()
        getPager()
    }

    if (type === 'next') {
        if (currentPage === limit) return
        currentPage += 1
        initPage()
        getPager()
    }
}


function handleEnter(event) {
    var inputValue = document.getElementById('pageInput').value


    // 检查是否按下了回车键
    if (event.key === 'Enter') {
        // 确保输入的是数字
        if (!isNaN(inputValue) && inputValue > 0) {
            currentPage = JSON.parse(inputValue)
            initPage()
            getPager()
        } else {
            alert('请输入有效的页码！');initSelect
            document.getElementById('pageInput').value = ''
        }
    }
}


// 点击页数回调函数
function handleClickYema (index) {
    currentPage = index
    initPage()
    getPager()
}

// 初始化 select 中选项
function initSelect() {
    // 获取select元素
    var selectElement = document.getElementById('fenye')
    var totalNode = document.getElementById('total')
    
    totalNode.innerText = total
    
    // 使用Option构造函数创建一个新的option对象，并直接添加到select中
    // <option value="2">20条/页</option>
    for(var i = 0; i < fenyeList.length; i++) {
        var newOption = new Option(`${fenyeList[i].pageSize}条/页`, `${fenyeList[i].id}`) // 参数分别是显示的文本和值
        selectElement.add(newOption) // 使用add方法添加到select中
    }
}

// 页面初始化
window.onload = function() {
    checkLogin()
    initPage()
    initSelect()
    getPageCount()
    getPager()

    
    var userInfo = JSON.parse(localStorage.getItem('userInfo'))
    var { isLogin, username, a, b, c, d, e } = userInfo

    let weidenglu = document.getElementById('weidenglu')
    let yidenglu = document.getElementById('yidenglu')

    if (isLogin) {
        weidenglu.style.display = 'none'
        yidenglu.children[0].innerText = username
    } else {
        yidenglu.style.display = 'none'
    }
}